<template>
  <div class="main" >
    <el-tabs>
      <div class="chartsStyle">
        <div class="chart-title">
          <tr style="height: 30px; ">
            <td><span class="nature">标题名称</span></td>
            <td> <el-input v-model="inputTitle" @change="changeTitle"
                           size="mini" style="width: 170px;padding-left: 9px "></el-input></td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">标题大小</span></td>
            <td>
              <el-input-number v-model="wordSize" @change="setWordSize" :min="10" :max="100"  size="mini" style="width: 170px;margin-left: 9px " label="描述文字">
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">横向位置</span></td>
            <td>
              <el-select v-model="titleAcross" clearable placeholder="请选择" size="mini" style="width: 170px;margin-left: 9px " >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">纵向位置</span></td>
            <td>
              <el-select v-model="titleVertical" clearable placeholder="请选择" size="mini" style="width: 170px;margin-left: 9px " >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">字体样式</span></td>
            <td>
              <el-select v-model="wordFamily" clearable placeholder="请选择" size="mini" style="width: 170px;margin-left: 9px " >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px; ">
            <td><span class="nature">标题颜色</span></td>
            <td><el-color-picker v-model="titleColor"  style="margin-left: 15px" ></el-color-picker></td>
          </tr>

        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'setStyle',
  data () {
    return {
      id: '',
      inputTitle: '标题',
      wordSize: 20, // 字体大小
      titleColor: '', // 标题颜色
      titleAcross: 'left',
      titleVertical: 'top',
      wordFamily: 'Courier New',

      options: [{
        value: 'left',
        label: '居左'
      }, {
        value: 'center',
        label: '居中'
      }, {
        value: 'right',
        label: '居右'
      }],

      options2: [{
        value: 'top',
        label: '居上'
      }, {
        value: 'center',
        label: '居中'
      }, {
        value: 'bottom',
        label: '居下'
      }],
      options3: [{
        value: 'serif',
        label: '宋体'
      }, {
        value: 'Sans-serif',
        label: '雅黑'
      }, {
        value: 'Monospace',
        label: '细黑'
      }, {
        value: 'Fantasy',
        label: '英文字体'
      }]
    }
  },
  methods: {
    changeTitle (val) {
      this.$store.state.chartTitle.text = val
      // this.$store.state.chartTitle.id = this.GenNonDuplicateID()
      console.log('this.$store.state.chartTitle.test')
      console.log(this.$store.state.chartTitle.test)
    },
    setWordSize (val) { // 处理标题大小
      this.$store.state.chartTitle.wordSize = this.wordSize
      // this.$store.state.chartTitle.id = this.GenNonDuplicateID()
      console.log('字体大小设置为：' + val)
    },
    GenNonDuplicateID () { // 产生一个随机的不重复的id
      return Math.random().toString(36).substr(3)
    }
  },

  watch: {
    titleColor (val) {
      this.$store.state.chartTitle.titleColor = val
      // this.$store.state.chartTitle.id = this.GenNonDuplicateID()
      console.log(this.$store.state.chartTitle.titleColor)
    },
    titleAcross (val) {
      this.$store.state.chartTitle.titleAcross = val
    },
    titleVertical (val) {
      this.$store.state.chartTitle.titleVertical = val
    },
    wordFamily (val) {
      this.$store.state.chartTitle.wordFamily = val
    }
  },
  beforeMount () {
    this.id = Math.random().toString(36).substr(3)
  }
}
</script>

<style lang="scss" scoped>
  .main{
    background-color: #E6E3E3;
  }
  .nature{
    font-size: 17px;
    font-weight:bold;

  }

</style>
